<template>
    <div class="gallery-item">
        <yk-space size="s" dir="vertical">
            <div class="gallery-item_image">
                <div class="gallery-item_cover">
                    <yk-image :src="coverUrl" width="238" height="160" :is-lazy="true" :preview="false" fit="cover" />
                </div>
                <yk-space :size="2">
                    <div class="gallery-item_image_left image-div">
                        <yk-image :src="baseImgPath +'/'+ content[0].url" width="78" height="78"
                            :is-lazy="true" :preview="false" fit="cover" v-if="content[0]"/>
                    </div>
                    <div class="gallery-item_image_center">
                        <yk-image :src="baseImgPath +'/'+ content[1].url" width="78" height="78"
                            :is-lazy="true" :preview="false" fit="cover" v-if="content[1]"/>
                    </div>
                    <div class="gallery-item_image_right">
                        <yk-image :src="baseImgPath +'/'+ content[2].url" width="78" height="78"
                            :is-lazy="true" :preview="false" fit="cover" v-if="content[2]"/>
                    </div>
                </yk-space>
                <yk-space :size="4" class="gallery-item_footerUtility_right">
                            <IconFillOutline @click="updateArticle"/>
                        <yk-popconfirm trigger="click" title="删除" content="删除将不可恢复" @cancel="cancel"
                            @confirm="deleteArticle()">
                            <IconDeleteOutline />
                        </yk-popconfirm>
                    </yk-space>
            </div>
            <div style="width: 100%;">
                <p class="gallery-item_title" v-html="title"></p>
                <div class="gallery-item_footerUtility">
                    <yk-space size="xl">
                        <yk-text type="secondary">
                            <yk-text type="third">
                               查看
                                {{ props.articleData.views }}
                            </yk-text>
                            <yk-text type="third" style="margin:0 12px;">
                                喜欢
                                {{ props.articleData.views }}
                            </yk-text>
                          
                        </yk-text>
                    </yk-space>
                    <yk-text type="third" style="margin:0 12px;">{{ getTimeYMD(props.articleData.created_at)}}</yk-text>
           
                </div>
            </div>

        </yk-space>
    </div>
</template>
<script lang="ts" setup>
import { computed, getCurrentInstance,watch,onMounted,ref } from 'vue';
import type { articleData } from '../../utils/interface';
import { getTimeYMD } from '../../utils/time'; // 导入格式化时间的函数
import { baseImgPath } from '../../utils/env'; // 导入图片路径
import { useRouter } from 'vue-router';
import { highlightKeyword } from '../../utils/searchHighlight';
const router = useRouter();
const proxy: any = getCurrentInstance()?.proxy
function cancel() {
    proxy.$message({ type: 'warning', message: '你点击了取消按钮' })
}


const emits = defineEmits(['delete', 'state'])

type ArticleItemProps = {
    articleData: articleData; // 文章数据
    searchTerm: string;
}
const props = withDefaults(defineProps<ArticleItemProps>(), {
    articleData: () => ({
        id: 0,
        title: '',
        created_at: new Date(),
        views: 0,
        comment: 0,
        praise: 0,
        state: 0
    }), // 文章数据默认值
    searchTerm:''
})

//封面地址
const coverUrl = computed(() => {
    return baseImgPath +'/'+ props.articleData?.cover; // 假设 coverUrl 是文章数据中的字段
})

const content = computed(() => {
    if(!props.articleData?.content) return []
    const content = props.articleData?.content?.split(" ")
    return content?.map((obj:string)=>JSON.parse(obj))

})

// 删除文章
const deleteArticle = () => {
    emits('delete', props.articleData!.id)
    // 在这里实现删除文章的逻辑，例如调用 API 或更新状态
}


//跳转到编辑图库页面
const updateArticle = () => {
    router.push({ 
        path: '/editgallery', 
        query: { id: props.articleData!.id} 
    })
}
// 高亮关键词
const title = ref('')
const introduce = ref('')
const highlightText = (key?: string) => {
    if (props.articleData?.introduce) {
        introduce.value = highlightKeyword(props.articleData?.introduce, key);
    }
    title.value = highlightKeyword(props.articleData?.title, key);
};

watch(()=>props.searchTerm,()=>{
    highlightText(props.searchTerm);
})
onMounted(()=>{
    highlightText(props.searchTerm);
})

</script>
<style scoped lang="less">
.gallery-item {
    border-radius: @radius-m;
    background-color: @bg-color-l;

    width: 238px;

    &_image_left {
        border-radius: 0 0 0 @radius-m;
        overflow: hidden;
    }

    &_image_right {
        border-radius: 0 0 @radius-m 0;
        overflow: hidden;
    }
    .image-div {
        width: 78px;
        height: 78px;
    }

    &_cover {
        position: relative;
        border-radius: @radius-m @radius-m 0 0;
        flex: none;
        overflow: hidden;
        padding-bottom: 2px;
    }

    &_unpublish {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        line-height: 30px;
        font-weight: 500;
        background: rgba(43, 90, 237, 0.8);
        color: @white;
    }

    &_title {
        .font-l();
        font-weight: 600;

    }


    &_footerUtility {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_right {
            position:absolute;
            right: @space-l;
            top: @space-l;
            background: rgba(255,255,255,0.56);
            border-radius:@radius-m;
            padding: @space-ss;
            opacity: 0;
            .yk-icon {
                width: 24px;
                height: 24px;
                padding: 5px;
                color: @gray;
                cursor: pointer;
                &:hover {
                    color: @pcolor;
                }
            } 
            &:hover {
                    background: rgba(255,255,255,0.64);
                    backdrop-filter: blur(2px);
                }
        }
    }
    &:hover{
        .gallery-item_footerUtility_right{
            opacity: 1;
        }
    }
}
</style>